// 获取本地储存里面的CMSTOKEN
// 如果没有登录 不能访问首页Vue路由导航守卫
const token = localStorage.getItem("CMSTOKEN");
if (!token) {
  alert("你还没登陆呢");
  location.href = "./login.html";
}
/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/

/*打开页面 发送Ajax请求 获取所有成绩
1.封装函数 getScoreList
2.在函数里面发送ajax请求
3.数据是否请求成功
4.将数据渲染到页面上面 服务器响应的是对象*/
const tbody = document.querySelector("tbody");
const getScoreList = () => {
  axios({
    url: "/score/list",
  }).then(({ data: res }) => {
    if (res.code !== 0) return Toast.fail(res.message);
    Toast.success(res.message);
    tbody.innerHTML = Object.keys(res.data).map((item) => `
        <tr>
          <th scope="row">${item}</th>
          <td>${res.data[item].name}</td>
          <td class="score" data-id="${item}" data-batch = "1">${res.data[item].score[0]}</td>
          <td class="score" data-id="${item}" data-batch = "2">${res.data[item].score[1]}</td>
          <td class="score" data-id="${item}" data-batch = "3">${res.data[item].score[2]}</td>
          <td class="score" data-id="${item}" data-batch = "4">${res.data[item].score[3]}</td>
          <td class="score" data-id="${item}" data-batch = "5">${res.data[item].score[4]}</td>
        </tr>
        `
      )
      .join("");
  });
};
getScoreList();

/*鼠标点击td时 能够使td可以编辑
  1.需要采用事件委托注册事件
  2.怎么判断是后面哪几个td  3.创建input标签
  4.追加input标签
  5.让input自动获取焦点
  6.当input失去焦点时 将当前的input删除即可
  7.给input注册键盘按下 键盘抬起需要判断按下是否有回车键
  8.发送Ajax给服务器
  */
// 1.需要采用事件委托注册事件
tbody.addEventListener("click", function (e) {
  // 2.怎么判断是后面哪几个td
  if (e.target.dataset.id) {
    // 3.创建input标签
    const inputNode = document.createElement("input");
    // 4.追加input标签
    inputNode.classList.add("inp");
    inputNode.value = e.target.innerText;
    // console.log(inputNode)父对象.appendChild(要添加的子元素)
    e.target.appendChild(inputNode);
    // 5.让input自动获取焦点
    inputNode.focus();
    inputNode.select();
    inputNode.addEventListener('blur',function(){
      this.remove()
    })
    inputNode.addEventListener('keydown',function(e){
      if(e.key === 'Enter'){
        const score = this.value
        const batch = this.parentNode.dataset.batch
        const stu_id = this.parentNode.dataset.id
        axios({
          url:'/score/entry',
          method:'post',
          data: {
            stu_id,
            batch,
            score
          }
        }).then(({ data:res }) => {
          if(res.code !== 0) return Toast.fail(res.message)
          Toast.success(res.message)
          getScoreList()
        }).catch(err => {
          Toast.fail(err.response.data.message)
        })
      }
    })
  }
})
